<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-09-14 15:29:24
 * @LastEditors: zhangxiang
 * @LastEditTime: 2022-11-03 09:56:15
 * @Description:
 *
-->

<template>
  <div class="event-sequential-ctn">
    <div class="nums">
      <!-- 总数 -->
      <div class="now">{{ sequential.currentValue }}</div>
      <!-- 环比趋势icon -->
      <img :src="iconSrc" class="icon" alt="环比" />
      <!-- 环比值 -->
      <div :class="['value', sequential.sequentialType === '+' ? 'up' : '']">
        {{ getSequentialValue }}
      </div>
    </div>
    <div class="subtitle">{{ getSubtitle }}</div>
  </div>
</template>

<script>
export default {
  name: 'EventSequential',
  props: {
    sequential: {
      // 环比
      type: Object,
      required: true,
      default: () => {}
    },
    timeType: {
      // 时间筛选
      type: String,
      required: true,
      default: '24hour'
    }
  },
  computed: {
    /**
     *
     * @description: 获取环比
     * @return {*}
     *
     */
    getSequentialValue() {
      let sequentialValue = this.sequential.sequentialValue || '' // 获取sequentialValue
      const arr = sequentialValue.split('.') // 拆分
      if (arr.length > 1 && arr[1] === '00') {
        // 去除sequentialValue后的00
        sequentialValue = arr[0]
      }
      return sequentialValue === '--' ? '--' : sequentialValue + '%'
    },
    /**
     *
     * @description: 获取子标题
     * @return {*}
     *
     */
    getSubtitle() {
      return this.timeType === '24hour' ? '近24小时总数 / 24小时环比' : '近一周总数 / 一周环比'
    },
    /**
     *
     * @description: 获取环比趋势图标路径
     * @return {*}
     *
     */
    iconSrc() {
      return this.sequential.sequentialType === '+'
        ? require('@/assets/imgs/statis-analysis/icon_sequential_up.png')
        : require('@/assets/imgs/statis-analysis/icon_sequential_down.png')
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.event-sequential-ctn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .nums {
    display: flex;
    align-items: baseline;

    .now {
      .textStyle(48px, 900, #4a4a4a);
      line-height: 68px;
    }
    .icon {
      width: 33px;
      margin: 0 6px 0 9px;
    }
    .value {
      .textStyle(30px, 600, #0091ff);

      &.up {
        color: #6dd400;
      }
    }
  }

  .subtitle {
    .textStyle(14px, 500, #C3C3C3);
    line-height: 20px;
  }
}
</style>
